<template>
	<view v-if="list && list.length > 0" class="cu-card case" :class="props.isCard ? 'no-card' : ''">
		<view class="cu-item shadow padding-left padding-right" v-for="(item, index) in list" :key="index"
			:data-index="index" :data-value="item" @click="handleSelect">
			<view class="flex justify-between align-center padding-sm">
				<view>
					<text class="lg text-orange cuIcon-deliver"></text>
					<text class="margin-left-xs text-green text-size-16">{{ item.plate }}</text>
				</view>
				<!-- <view class="cu-tag radius bg-green text-white text-size-16">运营中</view> -->
			</view>
			<view class="cu-line"></view>
			<view class="padding-sm">
				<view class="flex align-center">
					<view class=" flex-sub">
						<text class="cuIcon-peoplefill text-orange"></text>
						<text class="text-size-14 margin-left-xs">绑定司机：</text>
						<text class="text-size-14 text-bold text-orange margin-left-xs">{{ item.driverName }}</text>
					</view>
				</view>
				<view class="flex align-center">
					<view class=" flex-sub">
						<text class="cuIcon-friendfill text-orange"></text>
						<text class="text-size-14 margin-left-xs">所属公司：</text>
						<text class="text-size-14 text-bold text-orange margin-left-xs">{{ item.company }}</text>
					</view>
				</view>
				<view class="flex align-center">
					<view class=" flex-sub">
						<text class="cuIcon-colorlens text-orange"></text>
						<text class="text-size-14 margin-left-xs">车牌颜色：</text>
						<text
							class="text-size-14 text-bold text-orange margin-left-xs">{{ getStatus(item.plateColor) }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		},
		list: Array
	});
	const statusList = [{
			id: 1,
			name: '蓝牌'
		},
		{
			id: 2,
			name: '黄牌'
		},
		{
			id: 3,
			name: '黄绿牌'
		}
	];
	const getStatus = (e: number) => {
		const item = statusList.find(obj => {
			return obj.id == e;
		});
		if (item) {
			return item.name;
		} else {
			return '未知';
		}
	};
	const handleSelect = (e: any) => {
		emit('action', e.currentTarget.dataset.value);
	};
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
	}
</style>
